<!-- 重要指标 -->
<template>
  <ModelTile class="zyzb" title="重要指标">
    <div class="row-list" v-for="(item, index) of progressList" :key="index">
      <div class="progress-text">
        <div class="area">
          <span>{{ item.areaName }}</span>
          <span class="area-target">实际完成：{{ item.actual }}/目标：{{ item.target }}</span>
        </div>
        <div class="progress-val">{{ item.progress }}%</div>
      </div>
      <div class="progress-bar">
        <div
          class="progress"
          :style="{ width: item.progress + '%', background: item.progressBarColor }"
        ></div>
        <div class="progress-indicator" :style="{ left: item.progress + '%' }"></div>
      </div>
    </div>
  </ModelTile>
</template>

<script lang="ts" setup>
import { ref, defineComponent } from 'vue'
import ModelTile from '@/components/modleTitle/index.vue'
// const progress = ref(84)
// const progressBarColor = ref('')
// progressBarColor.value = `linear-gradient(to right, #147f80, #a9fefe, #a9fefe )`
const progressBarColor1 = ref('linear-gradient(to right, #147f80, #a9fefe, #a9fefe )')
const progressBarColor2 = ref('linear-gradient(to right, #805616, #b79057, #fadeae )')
const progressBarColor3 = ref('linear-gradient(to right, #802716, #c06f60, #f8c0b4 )')
const progressList = ref([
  {
    areaName: '广州市',
    target: '120亿',
    actual: '100亿',
    progress: 84,
    progressBarColor: progressBarColor1.value
  },
  {
    areaName: '越秀区',
    target: '110亿',
    actual: '80亿',
    progress: 80,
    progressBarColor: progressBarColor1.value
  },
  {
    areaName: '海珠区',
    target: '120亿',
    actual: '100亿',
    progress: 75,
    progressBarColor: progressBarColor1.value
  },
  {
    areaName: '白云区',
    target: '156亿',
    actual: '100亿',
    progress: 68,
    progressBarColor: progressBarColor2.value
  },
  {
    areaName: '荔湾区',
    target: '120亿',
    actual: '30亿',
    progress: 46,
    progressBarColor: progressBarColor3.value
  },
  {
    areaName: '黄埔区',
    target: '240亿',
    actual: '30亿',
    progress: 52,
    progressBarColor: progressBarColor3.value
  },
  {
    areaName: '增城区',
    target: '205亿',
    actual: '30亿',
    progress: 52,
    progressBarColor: progressBarColor2.value
  },
  {
    areaName: '从化区',
    target: '120亿',
    actual: '30亿',
    progress: 65,
    progressBarColor: progressBarColor2.value
  },
  {
    areaName: '南沙区',
    target: '120亿',
    actual: '30亿',
    progress: 72,
    progressBarColor: progressBarColor1.value
  },
  {
    areaName: '天河区',
    target: '120亿',
    actual: '100亿',
    progress: 72,
    progressBarColor: progressBarColor1.value
  },
  {
    areaName: '番禺区',
    target: '240亿',
    actual: '30亿',
    progress: 46,
    progressBarColor: progressBarColor3.value
  },
  {
    areaName: '花都区',
    target: '240亿',
    actual: '30亿',
    progress: 50,
    progressBarColor: progressBarColor3.value
  }
])
</script>
<style lang="scss" scoped>
.zyzb {
  height: 100%;
  color: #fff;
  height: 1142vh * $Bh;
  .row-list {
    margin-bottom: 44vh * $Bh;
  }
  .p-f {
    // height: 16vh * $Bh;
  }
  .progress-bar {
    position: relative;
    width: 100%;
    height: 12vh * $Bh;
    background-color: #536081;
    margin-top: 10vh * $Bh;
    border-top-right-radius: 10vh * $Bh; /* 左上角为半圆形 */
    border-bottom-right-radius: 10vh * $Bh; /* 左下角为半圆形 */
    // overflow: hidden; /* 隐藏进度条超出的部分 */
  }

  .progress {
    height: 100%;
    position: relative;
    height: 12vh * $Bh;
    // background-color: #007bff;
    // transition: width 0.5s ease-in-out;
  }
  .progress-indicator {
    position: absolute; /* 绝对定位，相对于父元素 .progress-bar */
    top: -3vh * $Bh; /* 将指示器向上偏移一定距离 */
    width: 6vw * $Bw; /* 指示器宽度 */
    height: 18vh * $Bh; /* 指示器高度 */
    background-color: #e6ffff; /* 指示器颜色 */
    // border-radius: 50%; /* 圆形 */
  }
  .progress-text {
    display: flex;
    justify-content: space-between;
    height: 30vh * $Bh;
    .area {
      font-weight: 900;
      font-size: 30vh * $Bh;
      line-height: 30vh * $Bh;
    }
    .area-target {
      margin-left: 28vw * $Bw;
      font-weight: 400;
      font-size: 26vh * $Bh;
    }
    .progress-val {
      font-size: 20vh * $Bh;
      line-height: 30vh * $Bh;
    }
  }
}
</style>
